<template>
  <div class="container">
    <div class="list-top">
      <span class="text-grey">报警描述</span>
      <span class="text-grey">报警等级</span>
      <span class="text-grey">报警时间</span>
      <span class="text-grey">处理状态</span>
    </div>
    <div class="list">
    <vue-seamless-scroll :data="reportData" :class-option="defineScroll">
        <div class="item" v-for="(item,index) in reportData" :key="index">
          <span :title="item.displayName">{{ item.displayName }}</span>
          <span :class="item.priority == 'Ⅰ'? 'text-red':item.priority == 'Ⅱ'?'text-yellow':'text-blue4'">{{ item.priority }} 级</span>
          <span>{{ item.disappearedDatetime }}</span>
          <span :class="item.ackStatus == '未处理'? 'text-red':'text-grey'">{{ item.ackStatus }}</span>
        </div>
    </vue-seamless-scroll>
  </div>  
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import {getWaringTypeList} from "@/api/visual/overview.js"
export default {
  components: { vueSeamlessScroll },
  computed: {
    defineScroll() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      reportData: []
    }
  },
  mounted(){
    getWaringTypeList().then(res=>{
      this.reportData = res.data;
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 28vh;
  font-size: 12px;
  background: linear-gradient( 180deg, rgba(2, 68, 102, 0.3) 0%, rgba(2, 60, 89, 0.3) 0%, rgba(1, 18, 27, 0.3) 100%);
  border: 2px solid rgba(31,198,255,0.15);
  .list-top,.list .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      display: inline-block;
      width: 18%;
      text-align: center;
    }
    span:first-of-type {
      width: 42%;
      text-align: left;
      padding: 0 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .list-top {
    height: 12.5%;
  }
  .list {
    height: 87.5%;
    overflow: hidden;
  }
  .list .item {
    color: #fff;
    height: 11.5%;
    &.item:nth-child(2n+1) {
      background: rgba(255,255,255,0.04);
    }
  }
}
</style>